<template>
  <div>
    <iframe src="www.baidu.com">

    </iframe>
  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>

<script>
import Vue from 'vue'
import {ClientTable} from 'vue-tables-2'
import { SweetModal } from 'sweet-modal-vue'

Vue.use(ClientTable)

export default {
  name: 'page-2',
  metaInfo: {
    title: 'Page 2'
  },
   components: {
    SweetModal
  },
  data: () => ({
    tableData: [],
    columns: ['first_name', 'last_name', 'gender', 'company', 'edit'],
    options: {
      pagination: { chunk: 5 },
      sortIcon: {
        is: 'fa-sort',
        base: 'fas',
        up: 'fa-sort-up',
        down: 'fa-sort-down'
      }
    },
    newGay : {
      "first_name": "",
      "last_name": "",
      "gender": "",
      "company": ""
    },
    genderOptions: [
      { text: 'male', value: 1,checked: true },
      { text: 'female', value: 2 },
      { text: 'not sure', value: 3 }
    ],
    deleteRow: {}
  }),
  created () {
    // Fetch json data
    const req = new XMLHttpRequest()
    req.open('GET', '/static/json/table-data.json')

    req.onload = () => {
      const data = JSON.parse(req.response)

      // Add IDs for child rows functionality
      this.tableData = data.map((item, index) => {
        item['id'] = index
        return item
      })
    }

    req.send()
  },
  methods: {
    edit (row) {
      alert(`Edit: ${row.first_name} ${row.last_name}`)
    },
    remove (row) {
      //alert(`Remove: ${row.first_name} ${row.last_name}`)
      this.$refs.ultraWide.open()
      this.deleteRow = row
    },
    doRemove () {
      let _tableData = this.tableData
      let _deleteRow = this.deleteRow
      _tableData.splice(_tableData.findIndex(item => item.first_name === _deleteRow.first_name), 1)
      this.$refs.ultraWide.close()
    },
    addData () {
      this.$refs.slideModal.show()
    },
    hideSlideModal () {
      this.$refs.slideModal.hide()
    },
    slideModalAdd () {
      this.tableData.unshift(this.newGay)
      this.hideSlideModal()
    },
    slideModalCancel () {
      this.newGay = {
        "first_name": "",
        "last_name": "",
        "gender": "",
        "company": ""
      }
      this.hideSlideModal()
    }
  }
}
</script>
